<template>
  <div id="expenses">
    <div class="spinner" v-show="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>      
    <p class="infoP" v-show="infoP">
        财务报销
        <span class="financial-reimbursement-iconfont financial-reimbursement-add" @click="openForm = true"></span>
    </p>
      <!-- zd 是否有置顶的信息 -->
    <mt-loadmore :top-method="loadTop" ref="loadmore">
      <div v-bind:class="{zd:zd}">
        <div class="content" v-for="(item,i) in FinanceList" :key="i" @click="bill(item)">
          <p class="contentName">{{item.ACCEPT_NAME | dateEmpty}}</p>
          <!-- <p class="contentState" :class="s[i]">{{item.APPLY_TYPE | dateStatefo}}</p>       -->       
          <img v-if='item.FINANCEPROINST_NEXTID === 2000 || item.FINANCEPROINST_NEXTID === 4000|| item.FINANCEPROINST_NEXTID === 9000' class="typeImg" src="../../../static/img/examine.png" alt="" width="13%" >
          <img v-if='item.FINANCEPROINST_NEXTID === 1000 || item.FINANCEPROINST_NEXTID === 3000 || item.FINANCEPROINST_NEXTID === ""' class="typeImg" src="../../../static/img/Conclusion.png" alt="" width="13%" >
          <p class="typeText">{{item.FINANCEPROINST_NEXTID | processState}}</p>
          <br />
          <div>
            <span class="L-icon">L</span>
            <span class="contentText">{{item.PRODEF_NAME}}</span>
          </div>
          <br />
          <div>
            <span class="B-icon"></span>
            <span class="content-span">当前环节：{{item.ACTDEF_NAME || '已办结'}}</span>
          </div>       
          <div>
            <span class="G-icon"></span>
            <span class="content-span">申请人员：{{item.STAFF_NAME | dateEmpty}}</span>
          </div>
          <div>
            <span class="R-icon"></span>
            <span class="content-span">申请时间：{{item.FINANCEPROINST_CREATEDATE | dateEmpty}}</span>
          </div>                     			
        </div>
      </div>
    </mt-loadmore>
    <mt-popup v-model="openForm" position="right" class="expensesForm" :modal="false">
    <div class="expensesType">
        <!-- <h1 class="typeTitle">审批类型选择</h1> -->
        <img src="../../../static/img/expensesTop.png" class="expensesTypeTopImg" />
        <ul class="typeLists">
            <li v-for="(type,index) in expensesTypes" :key="type.OPERATION_TYPE" @click="checkType(type)">
              <p class="typeListsText">{{type.PRODEF_NAME}}</p>
              <span class="typeIndex">{{index+1 > 9 ? index+1 : '0'+(index+1)}}</span>
              </li>
            <li style="opacity: 0;">
              更多功能开发中
              <span class="financial-reimbursement-iconfont financial-reimbursement-add typeIndex"></span>
              <!-- <img src="../../../static\img\shadow.png" width="100%"/> -->
            </li>
        </ul>
        <button class="backBtn" @click="openForm = false">返回</button>
    </div>
    </mt-popup>
    <!-- </div>-->
  </div>
</template>

<script>
import store from "@/store/store.js";
import { Loadmore, Spinner, Popup} from "mint-ui";
import examine from "../../../static/img/examine.png";
import Conclusion from "../../../static/img/Conclusion.png";
import checkBox from "../assembly/checkBox";
import table_data from "../../assets/js/data.js"
import firstInputBox from '../assembly/firstInputBox'
import myClass from '@/assets/js/common'
export default {
  name: "page3",
  data() {
    return {
      // val:2000,
      // arr:[1,3],
      // sw:'',
      formHead:{
        PRODEF_ID: '', // 流程内码
        ACCEPT_TYPE: '', // 业务类型
        //ACCEPT_NAME: '', // 业务名称
        FINANCEPROINST_NEXTID: '1000', // 业务状态
        //FINANCEPROINST_DESC: '', // 备注
        //FINANCEPROINST_CREATEDATE: '', // 时间
        OPERATION_TYPE: '', // 业务类型
        //FINANCEPROINST_ID: '', //业务内码
        //FINANCEPROINST_NEXTID: '' //流程状态
      },
      listInfo:{},
      Url:
        "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?",
      spinner: true,
      infoP: false,
      openForm: false,
      openHeadForm:false,
      expensesTypes:[],
      FinanceList:[],
      zd:false //置顶信息
    };
  },
  methods: {
    loadTop(){
      this.expensesTypes = []
      this.FinanceList = []
      this.GetFinanceList();
    },
    GetFinanceList:function(){
      this.$api.post(this.$apiPath.baseURL, this.$apiPath.url,{
        action_type: 'GetFinanceList',
        action_data: store.state.openid,
        financeproinst_createdate: '',
        order: ''
      }).then(response =>{
            response.data.FinanceList.forEach((item,i) =>{ //通过业务内码置顶业务
              if(item.FINANCEPROINST_ID == store.state.finId){
                response.data.FinanceList.splice(i,1)
                response.data.FinanceList.splice(0,0,item)
                this.zd = true
                // console.log(item)
              }
            })
            this.expensesTypes = response.data.ProDefList
            this.FinanceList = response.data.FinanceList
            this.spinner = false;
            this.infoP = true;
            this.$refs.loadmore.onTopLoaded();
          }
        )
        .catch(error => {
          // console.log(error);
        });
    },
    checkType: function(type){
        myClass.setCookie("openFrom", false, 365 * 24 * 60 * 60 * 1000)
        this.formHead.PRODEF_ID = type.PRODEF_ID
        this.formHead.ACCEPT_TYPE = type.OPERATION_TYPE
        this.formHead.OPERATION_TYPE = type.OPERATION_TYPE
        table_data.table_data.forEach((item,index) => {
          if(item.type === type.OPERATION_TYPE) {
            // console.log(item.path)
            this.$router.push({ 
              path: "/tableParent/"+item.path,
              query:this.formHead
               });
          }
        })
    },
    bill: function(item) {
      // FINANCEPROINST_ID 业务内码   ACCEPT_TYPE 业务类型  NOWACTDEF_IDS 环节内码  FINANCEPROINST_NEXTID 流程状态
      this.listInfo = {
        PRODEF_ID: item.PRODEF_ID, // 流程内码
        ACCEPT_TYPE: item.ACCEPT_TYPE, // 业务类型
        ACCEPT_NAME: item.ACCEPT_NAME, // 业务名称
        FINANCEPROINST_NEXTID: item.FINANCEPROINST_NEXTID, // 业务状态
        FINANCEPROINST_DESC: item.FINANCEPROINST_DESC, // 备注
        FINANCEPROINST_CREATEDATE: item.FINANCEPROINST_CREATEDATE, // 时间
        OPERATION_TYPE: item.ACCEPT_TYPE, // 业务类型
        FINANCEPROINST_ID: item.FINANCEPROINST_ID, //业务内码
        FINANCEPROINST_NEXTID: item.FINANCEPROINST_NEXTID //流程状态
      }
      if(item.FINANCEPROINST_NEXTID !== 1000 || item.NOWSTAFF_ID !== this.expensesTypes[0].USER_ID){
          table_data.table_data.forEach((data,index) => {
            if(data.type === item.ACCEPT_TYPE) {
              this.$router.push({ 
                path: "/Homepage/"+data.path+"Details",
                query:{FINANCEPROINST_ID:item.FINANCEPROINST_ID, ACCEPT_TYPE:item.ACCEPT_TYPE, NOWACTDEF_IDS:item.NOWACTDEF_IDS, FINANCEPROINST_NEXTID:item.FINANCEPROINST_NEXTID, ACTDEF_NAME:item.ACTDEF_NAME}
                });
            }
          })
        // this.$router.push({path:"/Homepage/administrativeAssetsDetails",query:{FINANCEPROINST_ID:item.FINANCEPROINST_ID, ACCEPT_TYPE:item.ACCEPT_TYPE, NOWACTDEF_IDS:item.NOWACTDEF_IDS, FINANCEPROINST_NEXTID:item.FINANCEPROINST_NEXTID}})
      }else{
        table_data.table_data.forEach((data,index) => {
          if(data.type === item.ACCEPT_TYPE) {
            // console.log(data.path)
            this.$router.push({ 
              path: "/tableParent/"+data.path,
              query:this.listInfo
               });
          }
        })
        // this.$router.push({ path: "/tableParent/administrativeAssets",query:this.listInfo});
      }
    },
    pushHistory() { // 修改history
      var state = {
        title: "",
        url: "/expensesTypesList" // 这个url可以随便填，只是为了不让浏览器显示的url地址发生变化，对页面其实无影响
      };
      window.history.pushState(state, state.title, state.url);
    },
  },
  created() {
    document.getElementsByTagName("body")[0].style.overflow="auto"
    document.getElementsByTagName("body")[0].style.position = "static"
    this.GetFinanceList();
  },
  mounted() {
    
   
  },
  components:{
      checkBox,
      firstInputBox
  },
  watch:{
    // openForm (after, before) {
    // let that = this      
    //   if(after){
    //     myClass.setCookie("openFrom", true, 365 * 24 * 60 * 60 * 1000)
    //     document.getElementsByTagName("body")[0].style.position = "fixed"
    //     document.getElementsByTagName("body")[0].style.overflow = "hidden"
    //      window.addEventListener("popstate", function(e) {
    //       //  console.log(myClass.getCookie('openFrom'))
    //        if(myClass.getCookie('openFrom') == 'true'){
    //         //  console.log('come')
    //          myClass.setCookie("openFrom", false, 365 * 24 * 60 * 60 * 1000)
    //          that.$router.push({ path: "/Homepage/expenses" });
    //        }
    //         // that.openForm = false
    //      }, false);
    //     // this.pushHistory();
    //   }
    //   if(before){
    //     document.getElementsByTagName("body")[0].style.position = "static"
    //     document.getElementsByTagName("body")[0].style.overflow="auto"
    //   }
    // }
  }
};
</script>

<style scoped>
.mint-loadmore{
  min-height: 3rem
}
.zd .content:first-child{
  border: 1px solid #fb9154;
}
.noScoll {
    overflow: hidden;
}
.infoP {
  color: #b7b8ba;
  padding: 3.5rem 0.5rem 0.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.infoP .financial-reimbursement-iconfont {
    font-size: 1rem;
    margin-right: 0.2rem;
}
.hcontent {
  width: 95%;
  padding: 0.75rem;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  margin-bottom: 0.5rem;
  border: 1px solid #4a4c5b;
  position: relative;
}
.content {
  width: 95%;
  padding: 0.75rem;
  background-color: #fff;
  margin: 0 auto;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  margin-bottom: 0.5rem;
  position: relative;
}
.contentName {
  width: 7.5rem;
  float: left;
  font-size: 14px;
}
.L-icon {
  display: block;
  float: left;
  background-color: #9c9c9c;
  width: 0.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  border-radius: 0.5rem;
  text-align: center;
  color: #fff;
  margin: 0.25rem 0.25rem 0 0;
}
.contentText {
  display: block;
  float: left;
  color: #636363;
}
.B-icon {
  display: block;
  float: left;
  background-color:#74abfe;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 0.35rem;
  border-radius: 0.35rem;
  margin: 0.25rem 0.4rem 0 0.075rem;
}
.G-icon {
  display: block;
  float: left;
  background-color: #44bea3;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 0.35rem;
  border-radius: 0.35rem;
  margin: 0.25rem 0.4rem 0 0.075rem;
}
.R-icon {
  display: block;
  float: left;
  background-color: #fc9153;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 0.35rem;
  border-radius: 0.35rem;
  margin: 0.25rem 0.4rem 0 0.075rem;
}
.content-span {
  color: #636363;
}
.typeImg {
  position: absolute;
  top: 0;
  right: 0.75rem;
}
.typeText {
  color: #fff;
  position: absolute;
  top: 0rem;
  right: 0.75rem;
  width: 13%;
  text-align: center;
}
.contentState {
  position: absolute;
  right: 0.75rem;
  bottom: 0.77rem;
}
.types {
  color: #fc9153;
}
.loadPull {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
}
.expensesForm {
    /* position: fixed;
    top: 50%;
    bottom: 50%;
    left: 50%;
    right: 50%;
    animation:openForm 0.5s forwards;
    z-index: 102;
    background: #fff;
     */
    width: 100%;
    height: 100%;
    /* padding: 1.5rem 0.5rem; */
    overflow-y: auto;
    background: #f4f4f4;
}
.expensesType {
    text-align: center;
    min-height: 23.9rem;
    min-width: 17.75rem;
}
.expensesTypeTopImg {
  width: 100%;
  /* position: absolute; */
  /* left: 0; */
  /* display: none; */
}
.typeTitle {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
.typeLists {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 0.5rem 0;
}
.typeLists li {
    padding: 0 0 0.6rem;;
    font-size: 0.7rem;
    font-weight: 600;
    color: #000;
    width: 30%;
    border: 1px solid #f4f4f4;
    margin-top: 0.5rem;
    border-radius: 0.2rem;
    box-shadow: 0px 4px 10px 1px #d2d2d2;
    background: #fff;
    height: 4.3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-image: url("../../../static/img/shadow.png");
    background-repeat: no-repeat;
    background-size: 100% 115%;
    position: relative;
}
.typeIndex {
  display: block;
  color: #2878ed;
  font-size: 0.75rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  font-weight: 500;
  
}
.typeListsText {
  /* padding: 0px 0.4rem; */
}
.financial-reimbursement-add.typeIndex:before {
  content: "\E651";
  background: #5094f3;
  color: #fff;
  border-radius: 50%;
  font-size: 0.8rem;
}
.backBtn {
  width: 90%;
  height: 2.2rem;
  line-height: 2.2rem;
  border-radius: 0.2rem;
  background-color: #5094f3;
  margin: 0.8rem auto;
  text-align: center;
  color: #fff;
  border: none;
  font-size: 0.9rem;
}
.main{
  padding-top: 2rem;
}
.openHeadForm {
  width: 80%;
  height: 60%;
}
.btn{
    display: block;
    width: 90%;
    height: 2rem;
    line-height: 2rem;
    border-radius: 2px;
    background-color: #4c4b59;
    text-align: center;
    color: #fff;
    margin: 1rem auto;
    font-size: 0.7rem;
    outline: none;
    border: none;
}
/* @-webkit-keyframes openForm{
    0%{
        top: 0;
        bottom: 100%;
        left: 100%;
        right: 0%;
    }
    100%{
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
} */
</style>

